<!DOCTYPE html>
<html>
<head>
    <title>Gravitational Lensing Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="650" height="420"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        
        // Coordinates
        const O = { x: 50, y: 320 };
        const Q1 = { x: 300, y: 250 };
        const P1_base = { x: 300, y: 320 }; // Projection of Q1 on the base
        const Q2 = { x: 580, y: 190 };

        // Helper function for subscript text
        function drawSubscript(text, sub, x, y) {
            const mainFont = 'italic 22px serif';
            const subFont = 'italic 16px serif';
            
            ctx.font = mainFont;
            const textMetrics = ctx.measureText(text);
            const textWidth = textMetrics.width;
            
            const yOffset = (text === 'Q') ? -5 : 0;
            ctx.fillText(text, x, y + yOffset);
            
            ctx.font = subFont;
            ctx.fillText(sub, x + textWidth * 0.9, y + 5 + yOffset);
        }

        // 1. Draw the horizontal base line
        // Solid part (labeled ρ₁)
        ctx.beginPath();
        ctx.moveTo(O.x, O.y);
        ctx.lineTo(P1_base.x, P1_base.y);
        ctx.stroke();

        // 2. Draw main lines O-Q1-Q2 and O-Q2
        ctx.beginPath();
        ctx.moveTo(O.x, O.y);
        ctx.lineTo(Q1.x, Q1.y);
        ctx.lineTo(Q2.x, Q2.y);
        ctx.moveTo(O.x, O.y); // start new subpath for OQ2
        ctx.lineTo(Q2.x, Q2.y);
        ctx.stroke();

        // 3. Draw line segment 'r'
        ctx.beginPath();
        ctx.moveTo(Q1.x, Q1.y);
        ctx.lineTo(P1_base.x, P1_base.y);
        ctx.stroke();
        
        // 4. Dashed lines
        ctx.beginPath();
        ctx.setLineDash([6, 4]);
        // Base line dashed part
        const dashed_base_start = P1_base;
        const dashed_base_end = {x: Q2.x + 30, y: P1_base.y};
        ctx.moveTo(dashed_base_start.x, dashed_base_start.y);
        ctx.lineTo(dashed_base_end.x, dashed_base_end.y);
        
        // Dashed line for phi angle
        const phi_line_start = {x: Q1.x, y: Q1.y};
        const phi_line_end = {x: Q1.x + 120, y: Q1.y};
        ctx.moveTo(phi_line_start.x + 20, phi_line_start.y); // small gap for clarity
        ctx.lineTo(phi_line_end.x, phi_line_end.y);
        
        // Dashed corner at Q2
        const corner = { x: Q2.x, y: dashed_base_end.y };
        ctx.moveTo(Q2.x, Q2.y);
        ctx.lineTo(corner.x, corner.y);
        ctx.stroke();
        ctx.setLineDash([]);
        
        // 5. Draw angles
        // Angle theta
        ctx.beginPath();
        ctx.arc(O.x, O.y, 60, Math.atan2(Q1.y - O.y, Q1.x - O.y), 0, true);
        ctx.stroke();
        
        // Angle phi
        ctx.beginPath();
        const angle_q1q2 = Math.atan2(Q2.y - Q1.y, Q2.x - Q1.x);
        ctx.arc(Q1.x, Q1.y, 45, angle_q1q2, 0);
        ctx.stroke();

        // 6. Add labels
        // Points
        ctx.font = '22px serif';
        ctx.fillText('O', O.x - 25, O.y + 10);
        drawSubscript('Q', '1', Q1.x, Q1.y - 15);
        drawSubscript('Q', '2', Q2.x, Q2.y - 15);
        
        // Parameters
        drawSubscript('ρ', '1', 160, 335);
        drawSubscript('ρ', '2', 430, 210);
        
        ctx.font = 'italic 20px serif';
        ctx.fillText('r', Q1.x + 8, Q1.y + 40);
        ctx.fillText('θ', O.x + 70, O.y - 10);
        ctx.fillText('φ', Q1.x + 55, Q1.y - 5);
        
        // Figure caption
        ctx.font = 'bold 20px sans-serif';
        ctx.fillText('Fig. 2.6', 280, 400);

    </script>
</body>
</html>